<style>
</style>

<template>
  <div>
    <Row :gutter="10" class="margin-top-10">
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-information-circle"/>基本数据
          </p>
          <div>
            <DepCount :DataSource="depCount"></DepCount>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-help-buoy"/>隐患排查
          </p>
          <div>
            <Row>
              <!-- <Col span="14"> -->
                <LineAlarm :LineDataSource="alarmCount"></LineAlarm>
              <!-- </Col>
              <Col span="10">
                <Pie :PieDataSource="alarmCount"></Pie>
              </Col> -->
            </Row>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-medical"/>全年告警走势
          </p>
          <div>
            <SmoothLine :LineDataSource="alarmFullYearChart"></SmoothLine>
          </div>
        </Card>
      </Col>
    </Row>
    <!-- <Row
      :gutter="10"
      class="margin-top-10"
    >
      <Col
        :md="12"
        :lg="12"
        :style="{marginBottom: '10px'}"
      >
      <Card>
        <p
          slot="title"
          class="card-title"
        >
          <Icon type="stats-bars"></Icon>
          安全隐患排行
        </p>
        <div>
          <Row>

            <BarChart :BarDataSource="alarmDepChart"></BarChart>
          </Row>
        </div>
      </Card>
      </Col>
    </Row>-->
    <Row :gutter="10" class="margin-top-10">
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-stats"/>区域隐患告警
          </p>
          <div>
            <RegionalAlarmBar :dataSource="deptHiddenAlarmSum"></RegionalAlarmBar>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-nuclear"/>各区域火灾态势
          </p>
          <div>
            <RegionalFireSituBar :dataSource="alarmDeptDescTwoMonth"></RegionalFireSituBar>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="8" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="md-timer"/>警报触发时间
          </p>
          <div>
            <AlarmTriggerHeat :dataSource="weekHoursAlarm"></AlarmTriggerHeat>
          </div>
        </Card>
      </Col>
    </Row>
    <Row :gutter="10" class="margin-top-10">
      <Col :md="12" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-aperture"/>实时警情
          </p>
          <div>
            <RealTimeAlarmPie :dataSource="deptRealtimeAlarm"></RealTimeAlarmPie>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-analytics"/>安全隐患场所分布
          </p>
          <div>
            <HiddenAlarmPlace :dataSource="hiddenAlarmPlace"></HiddenAlarmPlace>
          </div>
        </Card>
      </Col>
    </Row>
    <Row :gutter="10" class="margin-top-10">
      <Col :md="12" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="md-barcode"/>火灾原因分布
          </p>
          <div>
            <FireCausePie :dataSource="fireAlarmReason"></FireCausePie>
          </div>
        </Card>
      </Col>
      <Col :md="12" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-basketball"/>火灾场所分布
          </p>
          <div>
            <FirePlacePie :dataSource="placeAlarmSum"></FirePlacePie>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getAlarmChart } from "@/api/home";
import LineAlarm from "./components/line.vue";
import SmoothLine from "./components/smoothLine.vue";
import Pie from "./components/pie.vue";
import BarChart from "./components/bar.vue";
import DepCount from "./components/depCount.vue";
import RegionalAlarmBar from "./components/regionalAlarmBar.vue";
import RegionalFireSituBar from "./components/regionalFireSituBar.vue";
import AlarmTriggerHeat from "./components/alarmTriggerHeat.vue";
import RealTimeAlarmPie from "./components/realTimeAlarmPie.vue";
import HiddenAlarmPlace from "./components/hiddenAlarmPlace.vue";
import FireCausePie from "./components/fireCausePie.vue";
import FirePlacePie from "./components/firePlacePie.vue";
export default {
  components: {
    BarChart,
    Pie,
    LineAlarm,
    SmoothLine,
    DepCount,
    RegionalAlarmBar,
    RegionalFireSituBar,
    AlarmTriggerHeat,
    RealTimeAlarmPie,
    HiddenAlarmPlace,
    FireCausePie,
    FirePlacePie
  },
  data() {
    return {
      // alarmStatChart: { confirm: 1, unconfirm: 1,break_count: 0, fire_count: 0, uninstall_count: 0 },
      alarmCount: {
        error_count: 1,
        fire_count: 1,
        integral_count: 1,
        offline_count: 0,
        power_count: 1,
        confirm: 18,
        unconfirm: 648
      },
      alarmDepChart: [
        { pre_count: 3, depName: "城南", fire_count: 1, break_count: 2 },
        { pre_count: 1, depName: "江夏区", fire_count: 2, break_count: 2 }
      ],
      alarmFullYearChart: [],
      depCount: { shopCount: 2, devCount: 1 },
      alarmDeptDescTwoMonth: [],
      placeAlarmSum: [],
      fireAlarmReason: [],
      hiddenAlarmPlace: [],
      deptHiddenAlarmSum: [],
      weekHoursAlarm: [],
      deptRealtimeAlarm: []
    };
  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId
    })
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let res = await getAlarmChart();
      if (res.code == 0) {
        console.log(res);
        // this.alarmStatChart = res.data.alarmStatChart;
        this.alarmCount = res.data.alarmCount;
        this.alarmDeptDescTwoMonth = res.data.alarmDeptDescTwoMonth;
        this.alarmFullYearChart = res.data.alarmFullYearChart;
        if (this.roleId == 1) {
          this.depCount = {
            devCount: 30000 + res.data.devCount,
            shopCount: 30000 + res.data.shopCount
          };
        } else {
          this.depCount = {
            devCount: res.data.devCount,
            shopCount: res.data.shopCount
          };
        }

        this.placeAlarmSum = res.data.placeAlarmSum;
        this.fireAlarmReason = res.data.fireAlarmReason;
        this.hiddenAlarmPlace = res.data.hiddenAlarmPlace;
        this.deptHiddenAlarmSum = res.data.deptHiddenAlarmSum;
        this.weekHoursAlarm = res.data.weekHoursAlarm;
        this.deptRealtimeAlarm = res.data.deptRealtimeAlarm;
      }
    }
  }
};
</script>
